---
title: Тег
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Компонент для візуального категоризування або маркування контенту.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип     | Опис                                                                                                                                                                          |
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | рядок   | Необов'язкове ім'я для додаткового стилювання                                                                                                                                 |
| колір       | рядок   | Колір тегу. Опції включають: `зелений`, `бірюзовий`, `небесний`, `синій`, `фіолетовий`, `рожевий`, `червоний`, `оранжевий`, `жовтий`, `сірий` |
| текст       | рядок   | Контент тегу                                                                                                                                                                  |
| onClick     | функція | Необов'язкова функція, що викликається, коли користувач натискає на тег                                                                                                       |

</Tab>

</Tabs>
